<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr" id="html">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JSTAL unit tests</title>
    <link rel="Stylesheet" media="screen" href="jqUnit/testsuite.css">
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.3.2");
    </script>
    <script type="text/javascript" src="jqUnit/jqUnit.js" runat="server"></script>
    <script type="text/javascript" src="../jstal.js" runat="server"></script>
    <script runat="server">
    
var spanClass = 'dummy';
var href = "http://www.test.com/?foo=bar&buz=biz&<thisissomething";
var title = "bla bla <blabla>";
var href1 = 0;
var href2 = 0;
var href3 = 0;
var array = ['one', 'two', 'three'];
var obj = { 'one' : 'first', 'two':'second', 'three':'third', 'four':'fourth' };

var foo = function(){
	with( jqUnit ){
		
		var data = {
			string : 'foo'
		}
		
		var trim = function( str ){
			return str.replace(/\s+/gm, ' ').replace(/\s*<\s*/gm, '<').replace(/\s*>\s*/gm,'>');
		}
		
		test( 'E4X support', function(){
			ok( typeof XML != 'undefined' );
		});
		
		test( 'JSTAL loaded?', function(){
			ok( typeof JSTAL != 'undefined' );
		});
		test( 'template from string', function(){
			var template = '<html></html>';
			ok( new JSTAL( template ), 'template from string works fine.' );
			ok( typeof (new JSTAL( template )).tpl == 'xml' );
		});
		test( 'template from XML', function(){
			var template = <html></html>;
			ok( new JSTAL( template ) , 'template from XML works fine.' );
			equals( typeof (new JSTAL( template )).tpl , 'xml' );
		});
		test( 'single empty element', function(){
			var template = '<div />';
			var tpl = (new JSTAL( template )).execute();
			equals( trim( tpl ) , "<div></div>" );
		});
		test( 'tal attributes', function(){
			var templates = [
				{ 
					input :'<span tal:attributes="class string:dummy" />',
					expected : '<span class="dummy"></span>' 
				},
				{ 
					input : '<span tal:attributes="class spanClass">my span content</span>',
					expected : '<span class="dummy">my span content</span>'
				},
				{
					input : '<span tal:attributes="class spanClass; id string:theid">my span content</span>',
					expected : '<span class="dummy" id="theid">my span content</span>'
				},
				{
					input : '<span tal:attributes="class unknown | false | spanClass">my span content</span>',
					expected : '<span class="dummy">my span content</span>'
				},
				{
					input : '<p><span tal:define="global false js:false" /><span tal:attributes="class false | unknown | spanClass; id false | string:mySpan">my span content</span></p>',
					expected : '<p><span></span><span class="dummy" id="mySpan">my span content</span></p>'
				},
				{
					input : '<p><a href="" tal:attributes="href href">bla bla</a><a href="" tal:attributes="href href; title title">bla bla</a></p>',
					expected : '<p><a href="http://www.test.com/?foo=bar&amp;buz=biz&amp;&lt;thisissomething">bla bla</a><a href="http://www.test.com/?foo=bar&amp;buz=biz&amp;&lt;thisissomething" title="bla bla &lt;blabla>">bla bla</a></p>'
				},
				{
					input : '<a href="" tal:attributes="href href1 | href2 | href3">bla bla</a>',
					expected : '<a href="0">bla bla</a>'
				},
				{
					input : '<span tal:attributes="class string: class ${spanClass}">my span content</span>',
					expected : '<span class="class dummy">my span content</span>'
				}/*, TODO: default attributes;
				{
					input : '<span class="class" tal:attributes="class fooClass | default">my span content</span>',
					expected : '<span class="class">my span content</span>'
				}*/
			]
			for(var i = 0; j = templates[i++]; ){
				var tpl = (new JSTAL( j.input )).execute();
				equals( trim( tpl ) , j.expected );
			}
		});
		
		test( 'tal condition', function(){
			var templates = [
				{ 
					input :'<span tal:condition="js: true">true</span>',
					expected : '<span>true</span>' 
				},
				{ 
					input :'<p><span tal:condition="exists: fooClass">fooClass</span><span tal:condition="exists: spanClass">spanClass</span></p>',
					expected : '<p><span>spanClass</span></p>' 
				},
				{ 
					input :'<p><span tal:condition="not: exists: fooClass">fooClass</span><span tal:condition="not: exists: spanClass">spanClass</span></p>',
					expected : '<p><span>fooClass</span></p>' 
				},
				{ 
					input :'<p><span tal:condition="not: js: true">(if !true)</span><span tal:condition="not: js: false">(if !false)</span></p>',
					expected : '<p><span>(if !false)</span></p>' 
				},
				{ 
					input :'<span tal:condition="js:function(){ return true }">(if true)</span>',
					expected : '<span>(if true)</span>' 
				},
				{ 
					input :'<span tal:condition="js:(function(){ return true })()">(if true)</span>',
					expected : '<span>(if true)</span>' 
				}
			]
			for(var i = 0; j = templates[i++]; ){
				var tpl = (new JSTAL( j.input )).execute();
				equals( trim( tpl ) , j.expected );
			}
		});
		
		test( 'tal content', function(){
			var templates = [
				{ 
					input :'<span tal:content="string: foo bar"></span>',
					expected : '<span>foo bar</span>' 
				},
				{ 
					input :'<span tal:content="spanClass"></span>',
					expected : '<span>dummy</span>' 
				},
				{ 
					input :'<span tal:content="string: spanClass = ${spanClass}"></span>',
					expected : '<span>spanClass = dummy</span>' 
				},
				{ 
					input :'<span tal:content="js: 2 + 2"></span>',
					expected : '<span>4</span>' 
				},
				{ 
					input :'<span tal:content="js: spanClass.replace(\'my\', \'mie\') "></span>',
					expected : '<span>dummie</span>' 
				}			
			]
			for(var i = 0; j = templates[i++]; ){
				var tpl = (new JSTAL( j.input )).execute();
				equals( trim( tpl ) , j.expected );
			}
		});
		
		test( 'tal repeat', function(){
			var templates = [
				{ 
					input :'<ul><li tal:repeat="item array" tal:content="item">item</li></ul>',
					expected : '<ul><li>one</li><li>two</li><li>three</li></ul>' 
				},
				{ 
					input :'<ul><li tal:repeat="item array" tal:content="repeat/item/index">item</li></ul>',
					expected : '<ul><li>0</li><li>1</li><li>2</li></ul>' 
				},
				{
					input :'<ul><li tal:repeat="item array" tal:condition="repeat/item/odd" tal:content="string: ${item}"></li></ul>',
					expected : '<ul><li>two</li></ul>' 
				},
				{ 
					input :'<ul><tal:block tal:repeat="item array" tal:omit-tag="true"><li tal:condition="repeat/item/odd" tal:content="item" class="odd"></li><li tal:condition="repeat/item/even" tal:content="item" class="even"></li></tal:block></ul>',
					expected : '<ul><li class="even">one</li><li class="odd">two</li><li class="even">three</li></ul>' 
				},
				{ 
					input :'<div><div tal:repeat="item obj">Item: <b tal:content="item"/> Length: <b tal:content="repeat/item/length"/> Odd: <b tal:content="repeat/item/odd"/> Even: <b tal:content="repeat/item/even"/> Start: <b tal:content="repeat/item/start"/> End: <b tal:content="repeat/item/end"/> Nr: <b tal:content="repeat/item/number"/> Index: <b tal:content="repeat/item/index"/> Key: <b tal:content="repeat/item/key"/></div></div>',
					expected : '<div><div>Item:<b>first</b>Length:<b>4</b>Odd:<b></b>Even:<b>true</b>Start:<b>true</b>End:<b></b>Nr:<b>1</b>Index:<b>0</b>Key:<b>one</b></div><div>Item:<b>second</b>Length:<b>4</b>Odd:<b>true</b>Even:<b></b>Start:<b></b>End:<b></b>Nr:<b>2</b>Index:<b>1</b>Key:<b>two</b></div><div>Item:<b>third</b>Length:<b>4</b>Odd:<b></b>Even:<b>true</b>Start:<b></b>End:<b></b>Nr:<b>3</b>Index:<b>2</b>Key:<b>three</b></div><div>Item:<b>fourth</b>Length:<b>4</b>Odd:<b>true</b>Even:<b></b>Start:<b></b>End:<b>true</b>Nr:<b>4</b>Index:<b>3</b>Key:<b>four</b></div></div>'
				}
			]
			for(var i = 0; j = templates[i++]; ){
				var tpl = (new JSTAL( j.input )).execute();
				equals( trim( tpl ) , j.expected );
			}
		});
		
		test( 'tal replace', function(){
			var templates = [
				{ 
					input :'<p>here is <span tal:replace="nothing"></span></p>',
					expected : '<p>here is</p>' 
				},
				{ 
					input :'<p>here is <span tal:replace="string: just a string"></span></p>',
					expected : '<p>here is just a string</p>' 
				},
				{ 
					input :'<p>here is <span tal:replace="array[0]"></span></p>',
					expected : '<p>here is one</p>' 
				},
				{ 
					input :'<p><span tal:replace="foo | bar | baz | default">default content</span></p>',
					expected : '<p>default content</p>' 
				}
			]
			for(var i = 0; j = templates[i++]; ){
				var tpl = (new JSTAL( j.input )).execute();
				equals( trim( tpl ) , j.expected  );
			}
		});
		test( 'tal omit-tag', function(){
			var templates = [
				{ 
					input :'<p>here is <span tal:omit-tag="true">a string</span> <span tal:omit-tag="false">and span</span></p>',
					expected : '<p>here is a string<span>and span</span></p>' 
				}
			]
			for(var i = 0; j = templates[i++]; ){
				var tpl = (new JSTAL( j.input )).execute();
				equals( trim( tpl ) , j.expected );
			}
		});
		
		test( 'metal macros', function(){
			var templates = [
				{ 
					input :'<p><strong metal:define-macro="macro0">my macro</strong><span metal:use-macro="template/macro0" /></p>',
					expected : '<p><strong>my macro</strong></p>' 
				},
				{ 
					input :'<p><strong metal:define-macro="macro0">my macro <b metal:define-slot="slot1">slot</b></strong> <span metal:use-macro="template/macro0">usong macro, <u metal:fill-slot="slot1">filling slot</u></span></p>',
					expected : '<p><strong>my macro<u>filling slot</u></strong></p>' 
				}
			]
			for(var i = 0; j = templates[i++]; ){
				var tpl = (new JSTAL( j.input )).execute();
				equals( trim( tpl ) , j.expected );
			}
		});
		
	}
}();

			
    </script>
  </head>
  <body id="body">
    
    <h1 id="header">JSTAL unit tests</h1>
		
		
    <h2 id="userAgent"></h2>
		
    <!-- Test HTML -->
    <div id="main"></div>
    <ol id="tests"></ol>
    

  </body>
</html>
